<template>
  <div class="user-detail">
    <el-card class="user-info-card" shadow="hover">
      <!-- 用户头像和昵称 -->
      <h3 class="username">{{ userDetails?.user_name || '用户名未设置' }}</h3>
      <!-- 用户基本信息展示 -->
      <el-row :gutter="20" class="info-row">
        <el-col :span="8">
          <div class="info-item">
            <p><strong>用户名:</strong> {{ userDetails?.user_name || '未设置' }}</p>
            <p><strong>音乐标签:</strong> {{ userDetails?.music_label || '未设置' }}</p>
            <p><strong>国家地区:</strong> {{ userDetails?.country_region || '未设置' }}</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <p><strong>用户状态:</strong> {{ userDetails?.user_status || '未设置' }}</p>
            <p><strong>注册时间:</strong> {{ userDetails?.create_date ? formatDate(userDetails.create_date) : '未设置' }}</p>
            <p><strong>违规次数:</strong> {{ userDetails?.violation_count || 0 }}</p>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="info-item">
            <p><strong>性别:</strong> {{ userDetails?.user_sex || '未设置' }}</p>
            <p><strong>生日:</strong> {{ userDetails?.user_birthday ? formatDate(userDetails.user_birthday) : '未设置' }}</p>
            <p><strong>总播放次数:</strong> {{ userDetails?.total_play_count || 0 }}</p>
          </div>
        </el-col>
      </el-row>

      <!-- 用户关注和粉丝数 -->
      <el-row :gutter="20" class="info-row">
        <el-col :span="12">
          <div class="info-item">
            <p><strong>关注数:</strong> {{ userDetails?.follow_count || 0 }}</p>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="info-item">
            <p><strong>粉丝数:</strong> {{ userDetails?.follower_count || 0 }}</p>
          </div>
        </el-col>
      </el-row>

      <!-- 用户个人简介 -->
      <div class="bio">
        <p><strong>个人简介:</strong> {{ userDetails?.biography || '未设置' }}</p>
      </div>

      <!-- 用户最近登录信息 -->
      <div class="login-info">
        <p><strong>最近登录时间:</strong> {{ userDetails?.last_login_time ? formatDate(userDetails.last_login_time) : '未登录' }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    userId: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      userDetails: null, // 存储用户详情数据
    };
  },
  mounted() {
    console.log('接收到的用户ID:', this.userId);
    this.fetchUserDetails();  // 页面加载时获取用户详情
  },
  methods: {
    // 获取用户详情
    fetchUserDetails() {
      this.$http.get(`/v1/user/${this.userId}`)
        .then((response) => {
          this.userDetails = response.data;  // 更新用户详情数据
        })
        .catch((error) => {
          console.error('加载用户详情失败:', error);
          this.$message.error('加载用户详情失败');
        });
    },

    // 格式化时间，年月日
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = ('0' + (d.getMonth() + 1)).slice(-2);
      const day = ('0' + d.getDate()).slice(-2);
      return `${year}-${month}-${day}`;
    },
  },
};
</script>

<style scoped>
.user-detail {
  max-width: 900px;
  margin: 30px auto;
}

.user-info-card {
  padding: 30px;
  background-color: #fff;
}

.background-img img {
  width: 100%;
  height: 800px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
}

.user-avatar {
  text-align: center;
  margin-top: -60px; /* Pull up avatar to overlap background */
}

.avatar {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

.username {
  margin-top: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

.info-row {
  margin-top: 20px;
}

.info-item {
  padding: 20px;
  background-color: #f7f7f7;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.info-item p {
  font-size: 14px;
  margin: 10px 0;
}

.bio {
  margin-top: 20px;
  background-color: #f7f7f7;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.login-info {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  color: #666;
}
</style>
